<template>
	<view class="container">
		<view class="head">
			<!-- 用户信息卡片 -->
			<view class="user-page">
				<view class="user-card">
					<view class="user-info">
						<!--头像-->
						<image class="avatar" :src="userInfo.avatar" mode="aspectFill" @click="handleAvatarClick" />
						<view class="info-content">
							<!--名字-->
							<view class="name-row"> <text class="name"
									@click="handleNameClick">{{ userInfo.name }}</text> <img src="/static/weixin.png"
									style="width: 44rpx; height: 44rpx;margin-top: 5rpx;" /> </view>
							<view class="score-row"> <text class="label">工分: </text> <text class="score"
									@click="handleScoreClick">{{ userInfo.score }}</text> </view>
							<view class="rating-row"> <text class="label">星级: </text>

								<!--星星-->
								<view class="stars">
									<view v-for="n in 5" :key="n">
										<img v-if="n<userInfo.score/100" src="/static/star.png"
											style="width: 25rpx; height: 25rpx;" />
									</view>
								</view>
								<text class="rating"></text>
							</view>
							<!--右边箭头-->
						</view> <img src="/static/placeholder.png" class="arrow"
							style="width: 30rpx; height: 30rpx;margin-right: 15rpx;" @click="goToEditInfoPage" />
					</view>

				</view> <!-- 功能列表 -->
				<view class="menu-list">
					<view class="menu-item" v-for="(item, index) in menuList" :key="index"
						@click="handleMenuClick(item)">
						<view class="menu-content">
							<view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
								<img :src="item.icon" style="width: 60rpx; height: 60rpx;" />
							</view>
							<text class="menu-text">{{ item.text }}</text>
							<!-- 消息中心红点 -->
							<view v-if="item.badge" class="badge">{{ item.badge }}</view>
						</view>
						<img src="/static/placeholder.png" class="arrow"
							style="width: 30rpx; height: 30rpx; margin-right: 15rpx;" />
					</view>
				</view>
			</view>
			<CustomBottomNav></CustomBottomNav>

			<!-- 分享面板弹窗 -->
			<view v-if="showSharePanel" class="share-panel-mask" @click="showSharePanel = false">
				<view class="share-panel" @click.stop>
					<view class="share-title">请选择分享平台</view>
					<view class="share-options">
						<view class="share-option" @click="goWechat">
							<image src="/static/weixin.png" class="share-icon" />
							<text>微信</text>
						</view>
						<view class="share-option" @click="goMoments">
							<image src="/static/friend-circle.png" class="share-icon" />
							<text>朋友圈</text>
						</view>
					</view>
					<view class="share-cancel" @click="showSharePanel = false">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import CustomBottomNav from '../common/tabar.vue';
	import {
		usePublicStore
	} from '../../store/public';
	import {
		onMounted,
		ref
	} from 'vue';

	const userPublic = usePublicStore();

	const activeTab = ref(
		0); // 当前选中的标签索引 
	const currentTab = ref(3);
	const bottomNavs = [{
		icon: '/static/home.png',
		iconActive: '/static/home-active.png',
		label: '首页',
		url: '/pages/index/index'
	}, {
		icon: '/static/order.png',
		iconActive: '/static/order-active.png',
		label: '工单',
		url: '/pages/order/order'
	}, {
		icon: '/static/check.png',
		iconActive: '/static/check-active.png',
		label: '巡检',
		url: '/pages/check/check'
	}, {
		icon: '/static/user.png',
		iconActive: '/static/user-active.png',
		label: '我的',
		url: '/pages/user/user'
	}];
	// 跳转底部导航 
	const goBottomNav = (url, index) => {
		currentTab.value = index;
		uni.reLaunch({
			url
		});
	};
	// 我的 
	const userInfo = ref({
		name: '李维修',
		avatar: '/static/avatar.png',
		score: '160.00'
	});
	const menuList = ref([{
			icon: '/static/wechatReminder.png',
			text: '开启微信提醒',
			url: '/pages/user/wechatReminder/wechatReminder'
		},
		{
			icon: '/static/myPerformance.png',
			text: '我的绩效',
			url: '/pages/user/myPerformance/myPerformance'
		},
		{
			icon: '/static/myAttendance.png',
			text: '我的考勤',
			url: '/pages/user/myAttendance/myAttendance'
		},
		{
			icon: '/static/workReport.png',
			text: '工作报告',
			url: '/pages/user/workReport/workReport'
		},
		{
			icon: '/static/settings.png',
			text: '设置',
			url: '/pages/user/settings/settings'
		},
		{
			icon: '/static/recommendToFriend.png',
			text: '推荐给好友',
			type: 'share'
		}
	]);
	// 头像点击事件 
	const handleAvatarClick = () => {
		console.log('点击了头像');
	};
	// 名字点击事件 
	const handleNameClick = () => {
		console.log('点击了名字');
	};
	// 工分点击事件 
	const handleScoreClick = () => {
		console.log('点击了工分');
	};
	// 跳转更多编辑信息页面 
	const goToEditInfoPage = () => {
		uni.navigateTo({
			url: '/pages/editInfo'
		});
	};
	// 跳转二级页面 
	const goToSecondaryPage = (url) => {
		uni.navigateTo({
			url
		});
	};
	onMounted(() => {
		userInfo.value.name = userPublic.getUserInfo().name;
		userInfo.value.score = userPublic.getUserInfo().score;
	})

	const showSharePanel = ref(false);

	function handleMenuClick(item) {
		if (item.type === 'share') {
			showSharePanel.value = true;
		} else if (item.url) {
			uni.navigateTo({
				url: item.url
			});
		}
	}

	function goWechat() {
		showSharePanel.value = false;
		// 跳转到最近聊天列表页面
		uni.navigateTo({
			url: '/pages/user/recommendToFriend/wechatList/wechatList'
		});
	}

	function goMoments() {
		showSharePanel.value = false;
		// 跳转到朋友圈发布页面
		uni.navigateTo({
			url: '/pages/user/recommendToFriend/momentsPublish/momentsPublish'
		});
	}
</script>
<style scoped>
	/*背景颜色*/
	.container {
		background: linear-gradient(to bottom, #93D2F3 10%, #EFEFEF 60%);
		padding-bottom: 240rpx;
		min-height: 1200rpx;
	}

	/*底部*/
	.bottom-nav {
		position: fixed;
		bottom: 0;
		padding-bottom: 10rpx;
		width: 100%;
		height: 130rpx;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2rpx 8rpx #eee;
		z-index: 999;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.nav-label {
		font-size: 26rpx;
		color: #000;
		margin-top: 4rpx;
	}

	.nav-label.active {
		color: #3D76FF;
	}

	/*我的*/
	.user-page {
		padding: 20rpx;
	}

	/*名字白色背景*/
	.user-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin: 45rpx 15rpx 10rpx;
		position: relative;
	}

	.user-info {
		display: flex;
		align-items: center;
		position: relative;
	}

	.avatar {
		width: 195rpx;
		height: 195rpx;
		border-radius: 100rpx;
		margin-right: 15rpx;
		border: 3px solid #FFFFFF;
		position: relative;
		background-size: cover;
		background-position: center;
		top: -33rpx;
		left: -8rpx;
	}

	.info-content {
		flex: 1;
	}

	.name-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 45rpx;
		font-weight: bold;
		color: #000;
		margin-right: 10rpx;
	}

	.score-row {
		margin-bottom: 10rpx;
	}

	/*文字样式*/
	.label {
		font-size: 29rpx;
		color: #6C6C6C;
	}

	.score {
		font-size: 29rpx;
		color: #6C6C6C;
	}

	.rating {
		font-size: 29rpx;
		color: #6C6C6C;
	}

	.rating-row {
		display: flex;
		align-items: center;

	}

	.stars {
		display: flex;
		margin: 0 10rpx;
	}

	.menu-list {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
		margin: 20rpx 15rpx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 3rpx solid #EFEFEF;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-content {
		display: flex;
		align-items: center;
	}

	.icon-wrapper {
		width: 72rpx;
		height: 72rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	/*功能文字*/
	.menu-text {
		font-size: 34rpx;
		color: #000000;
	}

	.arrow {
		flex-shrink: 0;
	}

	.badge {
		background: #e43d33;
		color: #fff;
		border-radius: 24rpx;
		font-size: 24rpx;
		padding: 0 12rpx;
		margin-left: 16rpx;
		position: absolute;
		right: -60rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 分享面板样式 */
	.share-panel-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 25rpx;
	}

	.share-panel {
		width: 100%;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx 0 20rpx 0;
		text-align: center;
	}

	.share-title {
		font-size: 40rpx;
		margin-bottom: 35rpx;
		color: #000;
	}

	.share-options {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.share-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 60rpx;
	}

	.share-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.share-cancel {
		font-size: 32rpx;
		color: #888;
		margin-top: 20rpx;
	}
</style>